import React from 'react';
import { Button, Modal, Form, Input, Select, Icon, DatePicker} from 'antd';



let id = 0;
const AddRecord = Form.create({ name: 'add_record_form' })(
    // eslint-disable-next-line react/prefer-stateless-function
    class extends React.Component {
        remove = k => {
            const { form } = this.props
            // can use data-binding to get
            const keys = form.getFieldValue('keys')
            // can use data-binding to set
            form.setFieldsValue({
                keys: keys.filter(key => key !== k),
            })
        }

        addCompany = () => {
            const { form } = this.props;
            // can use data-binding to get
            const keys = form.getFieldValue('keys');
            // eslint-disable-next-line no-plusplus
            const nextKeys = keys.concat(id++);
            // can use data-binding to set
            // important! notify form to detect changes
            form.setFieldsValue({
                keys: nextKeys,
            })
        }

        render() {
            const { visible, onCancel, onCreate, form } = this.props
            const { getFieldDecorator, getFieldValue } = form
            const formItemLayout = {
                labelCol: { span: 8 },
                wrapperCol: { span: 14 }
            }
            const formItemLayoutWithOutLabel = {
                wrapperCol: {
                    xs: { span: 24, offset: 0 },
                    sm: { span: 20, offset: 4 },
                }
            }
            getFieldDecorator('keys', { initialValue: [] })
            const keys = getFieldValue('keys')
            // eslint-disable-next-line @typescript-eslint/no-unused-vars
            const formItems = keys.map((k, index) => (
                <>
                    <Form.Item
                        {...formItemLayout}
                        label='企业名称'
                        required={false}
                        key={k}
                        style={{margin: 0}}
                    >
                        {getFieldDecorator(`add_company_names[${k}]`, {
                        validateTrigger: ['onChange', 'onBlur'],
                        rules: [
                            {
                            required: true,
                            whitespace: true,
                            message: "请输入企业名称!",
                            },
                        ],
                        })(<Input placeholder="请输入企业名称" style={{ width: '70%', marginRight: 8 }} />)}
                        {keys.length > 0 ? (
                        <Icon
                            className="dynamic-delete-button"
                            type="minus-circle-o"
                            onClick={() => this.remove(k)}
                        />
                        ) : null}
                    </Form.Item>
                    <Form.Item label={(
                            <span style={{color: '#7d7d7d', fontSize: '12px'}}>机构代码</span>
                        )} {...formItemLayout} style={{color: '#7d7d7d', fontSize: '12px'}}>
                        <span>该企业未录入</span>
                    </Form.Item>
                </>
            ))

            return (
                <Modal
                    visible={visible}
                    title="新增记录"
                    width='60%'
                    onCancel={onCancel}
                    onOk={onCreate}
                >
                    <Form style={{width: '80%', margin:'0 auto'}}>
                        <Form.Item label="走访日期" {...formItemLayout} required={false}>
                            {getFieldDecorator('date', {
                                rules: [{ required: true, message: '请选择!'}],
                            })(<DatePicker style={{ width: '100%' }} placeholder="请选择获得时间"/>)}
                        </Form.Item>
                        <Form.Item label="走访街道" {...formItemLayout} required={false}>
                            {getFieldDecorator('street', {
                                rules: [{ required: true, message: '请选择!'}],
                            })(<Select placeholder="请选择">
                                    <Select.Option value="医疗设备">医疗设备</Select.Option>
                                </Select>)}
                        </Form.Item>
                        <Form.Item label="走访领导" {...formItemLayout} required={false}>
                            {getFieldDecorator('leader', {
                                rules: [{ required: true, message: '请输入走访领导!'}],
                            })(<Input placeholder="请输入走访领导"/>)}
                        </Form.Item>
                        <Form.Item label="走访领导职务" {...formItemLayout} required={false}>
                            {getFieldDecorator('job', {
                                rules: [{ required: true, message: '走访领导职务!'}],
                            })(<Input placeholder="街道办主任"/>)}
                        </Form.Item>
                        {/* <Form.Item {...formItemLayout} required={false}>
                            <Button type="dashed" onClick={this.add} style={{ width: '60%' }}>
                                <Icon type="plus" /> Add field
                            </Button>
                        </Form.Item> */}
                        <Form.Item colon={false} label={(
                                <span style={{fontWeight: 'bold'}}>走访企业</span>
                            )} {...formItemLayout} required={false} style={{marginBottom: '10px'}}>
                        </Form.Item>
                        
                        
                        {formItems}
                        <Form.Item {...formItemLayoutWithOutLabel}>
                            <Button type="dashed" onClick={this.addCompany}><Icon type="plus"/> 新增企业</Button>
                        </Form.Item>
                    </Form>
                </Modal>
            )
        }
    }
)



export default AddRecord